.page-container { 
    display: grid;
    grid-template-columns: 1fr 2fr 2fr 2fr 1fr;
    grid-template-rows: 100px 100px 100px 400px 100px;
    grid-template-areas:
         "header header header header header"
         ". best-of overall-score . ."
         ". . running-score . ."
         ". button1 button2 button3 ."
         "footer footer footer footer footer" ;
    justify-items: center;
    gap: 20px 75px;
    font-family: 'Poppins', sans-serif;
    width:90%;
}





body {
    background-color: white;
}

.header {
    
    background-color: #404040;    
    position: fixed;
    left: 0px;
    right: 0px;
    top: 0px;
    height: 80px;
    z-index: 1;
       
}

.page-title {
    text-align: center;
    font-weight: 500;
    color: white;
        
}

.button {
    font-family: 'Poppins', sans-serif;
    width: 300px;
    height: 300px;
    border-radius: 30px;
    background-color: #f7f7f7;
    box-shadow: 6px 6px #e6e6e6;
}

 #btn-rock {
    grid-area: button1;
    justify-self: center;
    
    
    font-size: 28px;
    font-weight: bold;
    /* margin-top: 200px; */
}

#btn-paper {
    grid-area: button2;
    justify-self: center;
    font-size: 28px;
    font-weight: bold;
    /* margin-top: 200px; */
}

#btn-scissors {
    grid-area: button3;
    justify-self: center;
    font-size: 28px;
    font-weight: bold;
    /* margin-top: 200px; */

}



/* .display-result {
    color: black;
    font-size: 30px;
    position: relative;
    text-align: center;
    width: 500px;
} */

#result {
    grid-area: running-score;
    color: black;
    font-size: 30px;
    position: relative;
    text-align: center;
    /* width: 500px; */
}

#result p {
    margin-top: 0px;
}

#total-score {
    grid-area: overall-score;
    color: black;
    font-size: 30px;
    position: relative;
    text-align: center;
    /* width: 500px; */
}


.best-of {
    grid-area: best-of;
    position: relative;
    justify-self: left;
    border-style: solid;
    border-radius: 50%;
    width: 120px;
    height: 120px;  
    color:#FF4500;
    right: 130px; 

}

#five {
    position: relative;
    text-align: center;
    color: black;
    text-align: center;
    top: 20px;
}

#last-round {
    color: grey;
}

@media (max-width:500px){
    .page-container {
        grid-template-columns: 1fr;
        grid-template-rows: 200px; 
        grid-template-areas: 
           "header"
           "best-of"
           "overall-score"
           "running-score"
           "button1"
           "button2"
           "button3"
           "footer";
        justify-items: center;
        
    }

    .best-of {
        justify-content: center;
        right: 0px;
    }

    .

}